<template>
	<!-- 绑定手机号 -->
	<view>
		<view class="logo">
			<image src="/static/logo.png"></image>
		</view>
		<view class="title">绑定手机号</view>
		<view class="desc">在下方输入您的手机号</view>
		<view class="phone">
			<image src="/static/image/phoneicon.png"></image>
			<input type="number" maxlength="11" v-model="phone" placeholder="请输入手机号" placeholder-class="placestyle" />
		</view>
		<view class="loginbtn" @click="getCode">获取验证码</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				openid:'',
				device:''
			}
		},
		onLoad(opt) {
			console.log(opt);
			this.openid = opt.openid;
			this.device = opt.device;
		},
		methods: {
			//获取验证码
			getCode() {
				if (this.phone == '' || this.phone == undefined) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!/^1[3-9][0-9]{9}$/.test(this.phone)) {
					uni.showToast({
						title: '手机号码不正确，请重新填写',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '正在获取验证码'
				})
				this.$api.getcode({phone:this.phone}).then(res => {
					uni.showToast({
						title:'验证码已发送',
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:`/pages/login/inputcode?phone=${this.phone}&openid=${this.openid}&device=${this.device}`
						})
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	padding-bottom: 30rpx;
}
.logo{
	width: 109rpx;
	height: 109rpx;
	border-radius: 20rpx;
	margin: 204rpx 572rpx 54rpx 69rpx;
	
	image{
		@include img
	}
}
.title{
	font-size: 50rpx;
	font-family: Source Han Sans CN;
	font-weight: 500;
	color: #0D0D0D;
	margin-left: 69rpx;
}
.desc{
	font-size: 28rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #595959;
	margin: 30rpx 0 100rpx 69rpx;
}
.phone{
	@include align-center
	margin: 0 55rpx 70rpx;
	padding-bottom:11rpx;
	border-bottom:1rpx solid #BFBFBF;
	position: relative;
	
	image{
		width: 30rpx;
		height: 33rpx;
		margin-right: 23rpx;
	}
	input{
		width: 100%;
		padding-right: 23rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}
}
.loginbtn{
	margin: 100rpx 55rpx 81rpx;
	@include center
	position: relative;
	width: 640rpx;
	height: 90rpx;
	background: #FF773B;
	border-radius: 45rpx;
	font-size: 30rpx;
	font-family: Source Han Sans CN;
	font-weight: 500;
	color: #FFFFFF;
}
.placestyle{
	font-size: 30rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #595959;
}
</style>
